<template>
    <div class="hot">
        <div class="hot-title">热门城市</div>

        <ul class="hot-list">
            <li class="hot-item" v-for="value in Hotmsg" :key="value.id" @click="getHot(value.name)">
                {{value.name}}
            </li>
        </ul>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    data:function(){
        return {
             Hotmsg:[
                 {
                     id:"01",
                     name:"北京"
                 },
                 {
                     id:"02",
                     name:"上海"
                 },
                 {
                     id:"03",
                     name:"三亚"
                 },
                 {
                     id:"04",
                     name:"丽江"
                 },
                 {
                     id:"05",
                     name:"杭州"
                 },
                 {
                     id:"06",
                     name:"广州"
                 }
             ]           
        }
    },
    methods:{
        getHot:function(value){
            // alert(value)
            this.$router.push("/")
            this.changeCity(value)
        },
        ...mapMutations(['changeCity'])
    }
}
</script>

<style scoped>
.hot-title{
    font-size: .26rem;
    color: #212121;
    padding: .3rem;
   
}
.hot-list{
    background: #fff;
     position: relative;
     overflow: hidden;
}
.hot-list::before{
    content: "";
    position: absolute;
    width: 33.33%;
    height: 100%;
    left: 33.33%;
    border-right: .02rem solid #ddd;
    border-left: .02rem solid #ddd;
}
.hot-list .hot-item{
    width: 33.33%;
    height: .9rem;
    line-height: .9rem;
    font-size: .28rem;
    float: left;
    text-align: center;
    border-bottom:.02rem solid #ddd;
   position: relative;
}
</style>